<template>
  <div class="bgcolor">
    <!-- 顶部 -->
    <el-card
      shadow="never"
      class="order-box"
      style="margin-left: 20px;margin-right: 20px;"
    >
      <el-row
        :gutter="20"
        justify="center"
      >
        <el-col :span="6">
          <div class="ddbh">
            订单编号：
            <label>{{ data.orderId }}</label>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="ydbh">
            运单编号：
            <label>{{ data.id }}</label>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="xdsj">
            下单时间：
            <label>{{ list.createTime }}</label>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="ddzt">
            订单状态：
            <label v-if="list.status == ' 23000'">待取件</label>
            <label
              v-else-if="list.status == '23001'"
            >已取件</label>
            <label
              v-else-if="list.status == '23003'"
            >网点入库</label>
            <label
              v-else-if="list.status == '23004'"
            >待装车</label>
            <label
              v-else-if="list.status == '23005'"
            >运输中</label>
            <label
              v-else-if="list.status == '23006'"
            >网点出库</label>
            <label
              v-else-if="list.status == '23007'"
            >待派送</label>
            <label
              v-else-if="list.status == '23008'"
            >派送中</label>
            <label
              v-else-if="list.status == '23009'"
            >已签收</label>
            <label
              v-else-if="list.status == '23010'"
            >拒收</label>
            <label v-else>已取消</label>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="yjddrq" style="margin-top: 30px;">
            预计到达日期：
            <label>{{ list.estimatedArrivalTime }}</label>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 基本信息 -->
    <el-collapse
      v-model="activeNames"
      style="margin-top: 20px; border: none;margin-left: 20px;margin-right: 20px;"
    >
      <el-collapse-item name="1">
        <template slot="title">
          <div class="collapse-detail soliy"><h3 style="margin-left: 20px;">基本信息</h3></div>
        </template>
        <div class="block">
          <el-timeline>
            <div class="line" />
            <div
              class="pake-info"
              style="margin-top: 10px"
            >
              <span><i class="el-icon-user-solid" style="margin-right: 10px;" />发货方</span>
            </div>
            <div style="margin-top: 0px; margin-left: 40px; display: flex">
              <div style="">
                <div class="demo-input-suffix base-info">
                  发货方姓名：
                  <span>{{ list.senderName }}</span>
                </div>

                <div class="demo-input-suffix base-info">
                  发货方地址：
                  <span>辽宁沈阳皇姑</span>
                </div>
              </div>
              <div style="margin-left: 174px">
                <div class="demo-input-suffix base-info">
                  发货方电话：

                  <span>{{ list.senderPhone }}</span>
                </div>
                <div class="demo-input-suffix base-info">
                  &nbsp;&nbsp;&nbsp;详细地址：

                  <span>{{ list.senderAddress }}</span>
                </div>
              </div>
            </div>
            <div
              class="pake-info"
              style="margin-top: 20px"
            >
              <span
                style="display: inline-block; margin-top: 6px"
              ><i class="el-icon-user" style="margin-right: 10px;" />收货方</span>
            </div>
            <div style="margin-top: 0px; margin-left: 40px; display: flex">
              <div style="">
                <div class="demo-input-suffix base-info">
                  收货方姓名：
                  <span>{{ list.receiverName }}</span>
                </div>

                <div class="demo-input-suffix base-info">
                  收货方地址：
                  <span>湖北武汉武昌</span>
                </div>
              </div>
              <div style="margin-left: 174px">
                <div class="demo-input-suffix base-info">
                  收货方电话：
                  <span>{{ list.receiverPhone }}</span>
                </div>
                <div class="demo-input-suffix base-info">
                  &nbsp;&nbsp;&nbsp;详细地址：
                  <span>{{ list.receiverAddress }}</span>
                </div>
              </div>
            </div>
          </el-timeline>
        </div>
      </el-collapse-item>
      <!-- 运输信息 -->
      <el-collapse-item name="2" style="margin-top: 20px;">
        <template slot="title">
          <div class="collapse-detail soliy"><h3 style="margin-left: 20px;">运输信息</h3></div>
        </template>
        <el-scrollbar
          scroll-x
          class="order-scroll"
        >
          <el-steps
            v-show="
              list.taskTransports &&
                list.taskTransports.length > 0
            "
            shadow="never"
            align-center
            finish-status="success"
          >
            <el-step
              v-for="(item, index) in list.taskTransports"
              :key="item.id"
              :class="{
                lastBefore: !(
                  index !==
                  list.taskTransports.length - 1 - 1
                ),
                solid:
                  item.status === 4 &&
                  index === list.taskTransports.length - 1 - 1
              }"
              :title="item.startAgency === null ? '' : item.startAgency.name"
              :status="
                item.status === 1
                  ? 'wait'
                  : item.status === 2
                    ? index === list.taskTransports.length - 1 - 1
                      ? 'success'
                      : 'process'
                    : 'success'
              "
            >
              <template
                v-if="index !== list.taskTransports.length - 1"
                slot="description"
              >
                <div class="step-row">
                  <table
                    width="100%"
                    border="0"
                    cellspacing="0"
                    cellpadding="0"
                    class="processing_content"
                  >
                    <tr>
                      <td>运输任务：</td>
                      <td class="num">
                        {{ item.id === null ? '--' : item.id }}
                      </td>
                    </tr>
                    <tr>
                      <td>车辆：</td>
                      <td>
                        {{
                          item.truck === null ? '--' : item.truck.licensePlate
                        }}
                      </td>
                    </tr>
                    <tr>
                      <td>司机：</td>
                      <td>
                        {{
                          item.drivers === null
                            ? '--'
                            : item.drivers.map((item) => item.name).join(',')
                        }}
                      </td>
                    </tr>
                    <tr>
                      <td>到达时间：</td>
                      <td>
                        {{
                          item.actualArrivalTime === null
                            ? '--'
                            : item.actualArrivalTime
                        }}
                      </td>
                    </tr>
                  </table>
                </div>
              </template>
            </el-step>
          </el-steps>
        </el-scrollbar>
      </el-collapse-item>
      <!-- 货品信息 -->
      <el-collapse-item name="3" style="margin-top: 20px;">
        <template slot="title">
          <div class="collapse-detail soliy"><h3 style="margin-left: 20px;">货品信息</h3></div>
        </template>
        <div style="box-sizing: border-box">
          <el-table
            :data="arr"
            style="width: 100%"
            stripe
            empty-text="暂无数据"
            :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
          >
            <el-table-column
              label="序号"
              type="index"
              align="left"
              width="60"
            />
            <el-table-column label="货品名称">
              <span>单肩包</span>
            </el-table-column>
            <el-table-column label="货品类型">
              <template>
                <span>皮具箱包</span>
              </template>
            </el-table-column>
            <el-table-column label="重量（千克）">
              <template>
                <span>1</span>
              </template>
            </el-table-column>
            <el-table-column label="体积（立方）">
              <template>
                <span>1</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { wayballPage } from '@/api/wayball'
export default {
  data() {
    return {
      id: '',
      list: {
        taskTransports: []
      },
      data: {},
      activeNames: ['1', '2', '3'],
      arr: []
    }
  },
  created() {
    this.id = this.$route.query.id
    this.wayballPage(this.id)
  },
  methods: {
    async wayballPage(id) {
      const msg = await wayballPage(id)
      this.list = msg.order
      this.data = msg
      // 运输信息
      if (msg.taskTransports.length) {
        this.list.taskTransports = msg.taskTransports.reverse()
        this.list.taskTransports.push(
          Object.assign(
            {},
            {
              startAgency: {
                name: this.list.taskTransports[
                  this.list.taskTransports.length - 1
                ].endAgency.name
              },
              status:
                this.list.taskTransports[
                  this.list.taskTransports.length - 1
                ].status
            }
          )
        )
      }
    },
    // 运输信息
    handleChange() {}
  }
}
</script>

<style lang="scss" scoped>
  .bgcolor{
    background-color: #f3f5f9;
  }
  .soliy{
    background-color: #f8faff;
    width: 100%;
    height: 100%;
    display: flex; align-items: center;
  }
</style>
